<template>
  <div >
    <div style="float: right;margin-top: 0px;padding-top: 0px">
      <van-icon name="setting-o" @click="turn"/></div>
    <div style="width: 375px;height: auto;text-align: center" @click="goto">
      <span style="text-align: left;width: 80px;height: 80px;float: left">
        <van-image
          round
          width="5rem"
          height="5rem"
          :src=src
        />
      </span>
      <span style="height: 80px;width: 100px;line-height: 75px;text-align:left;margin-top: 0px;margin-left: -100px">
        {{ name!=''?name:'请登录'}}
        <van-tag plain type="primary">提升实名等级</van-tag>
      </span>
    </div>
    <br>
    <div style="width: 375px">
      <van-grid>
        <van-grid-item icon="label" text="我的订单" to="/myorders"/>
        <van-grid-item icon="bill" text="待付款"/>
        <van-grid-item icon="clock" text="待使用"/>
        <van-grid-item icon="comment" text="待评价" to="xinxinxin"/>
        <van-grid-item icon="gold-coin" text="退款/售后"/>
      </van-grid>
      <van-tabbar v-model="active">
        <van-tabbar-item icon="home-o" to="/">首页</van-tabbar-item>
        <!--<van-tabbar-item icon="search">标签</van-tabbar-item>-->
        <van-tabbar-item icon="friends-o" to="orderszhongxin">正在配送</van-tabbar-item>
        <van-tabbar-item icon="setting-o" >个人中心</van-tabbar-item>
      </van-tabbar>
    </div>
  </div>
</template>

<script>
  import axios from 'axios'
  export default {
    name: "personal_center",
    data() {
      return {
        active: 2,
        name:'',
        phone:sessionStorage.getItem("phone"),
        src:''
      };
    },
    methods:{
      turn(){
        if(this.name==''){
          this.$router.push("/login")
        }else{
          this.$router.push("/user_setting")
        }

      },
      goto(){
        if(this.name==''){
          this.$router.push("/login")
        }else{
          this.$router.push("/information")
        }
      }
    },
    mounted(){
      if(this.phone!=null) {
        axios.post("api/user/findone", {phone: this.phone}).then(res => {
          if (res.data.code == 200) {
            this.name = res.data.data.userName;
            this.src = res.data.data.headPhoto;
            sessionStorage.setItem("userName", this.name);
            sessionStorage.setItem("id", res.data.data.id);
            console.log(this.name);
          }
        })
      }
     }
  }
</script>

<style scoped>
  .van-icon::before {
    display: inline-block;
    color: oldlace;
    background-color: #171114;
    font-size: 20px;
  }
  .van-icon-label::before {
    content: '\F078';
    color: orange;
    background-color: darkorange;
  }
  .van-icon[data-v-c7183958]::before {
    display: inline-block;
    color: oldlace;
    background-color: #0d0e10;
    font-size: 29px;
  }
</style>
